<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>课程列表</title>
    <link th:href="@{/css/weblogin.css}" rel="stylesheet"/>
</head>
<body>
<style>
    html{background-color: #FFF}
    #body{text-align:center}
    .layout-main{width:1190px;margin-left:auto;margin-right:auto;font-family:'微软雅黑';overflow:hidden}
    .layout-l880{float:left;width:100%;background-color: #F0F0F0}
    .layout-r310{float:right;width:100%;}

    .ls-section{position:relative;border:1px solid #ececec;font-family:'微软雅黑';}
    .ls-sec-head h2{padding-left:80px;font-size:30px;font-style:normal;font-weight:normal;}
    .ls-sec-body{margin:0 39px;width:100%;}

    /* 可作为图片列表的规范性写法 .ls-sec-body 的宽度是780px */
    .ls-sec-body .img-ul{margin-right:-30px;overflow:hidden;}
    .ls-sec-body .img-ul .img-li{float:left;margin-right:47px;width:180px;list-style:none}
    .ls-sec-body .img-ul .img1{height:140px;width:200px;border-radius:20px}
    .ls-sec-body .img-ul .p1{color:#666;font-size:14px;line-height:24px;margin-bottom:49px;}
    #head {
        height: 120px;
        width: 100%;
        background-color: #66CCCC;
        text-align: center;
        position: relative;
    }
    .title {
        font-family: "宋体";
        color: #FFFFFF;
        position: inherit;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
        font-size: 36px;
        height: 40px;
        width: 30%;
    }
    #foot .copyright p {
        height: 24px;
        width: 100%;
    }
    #foot {
        width: 99%;
        height: 126px;
        background-color: #CC9933;
        position: absolute;
        overflow:hidden;
        bottom: 0;
    }
    .copyright {
        font-family: "宋体";
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
        height: 60px;
        width: 40%;
        text-align:center;
    }
    li {
        width: 100px;
        list-style:none;
    }
</style>
<div class="header" id="head">
    <div class="title">大数据学习系统</div>
    <span style="float: right;margin-right: 67px;">
        <ul style="width: 400px;">
            <li style="width: 30px; height: 30px;display: inline-block;"><img style="width: 100%; height: 100%;border-radius: 10px;" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}"></li>
            <li style="width: 110px; height: 30px;display: inline-block;">欢迎您，[[${user.userName}]]</li>
            <li style="width: 50px; height: 30px;display: inline-block;"><a href="web/toExamList" style="text-decoration: none;">去考试</a></li>
            <li style="width: 100px; height: 30px;display: inline-block;"><a href="logout" style="text-decoration: none;">退出</a></li>
        </ul>
    </span>
</div>
<iframe name="iframe0" width="100%" height="100%" data-id="/web/courseList"
        th:src="@{/web/courseList}" frameborder="0" seamless></iframe>
<div class="footer" id="foot">
    <div class="copyright">
        <div class="img">
            <span>联系邮箱：XXXXX@163.com</span>
        </div>

        <div class="img">
            <span>联系地址：XXXXXXXXXX</span>
        </div>

        <div class="img">
            <span>联系电话：XXXXXXXXXXXXXXXX</span>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    var ctx = "/";
    /** 加载课程列表 **/
    $(function() {
        $.post(ctx+"teach/tCourse/list",{},function(data){
            var res = data.rows;
            var datas = "";
            var pinjiedata = "";
            for(var i=0;i<res.length;i++) {
                var courseId = res[i].courseId;
                var name = res[i].courseName;
                var createTime = res[i].createTime;
                var imgUrl = res[i].picUrl;
                var remark = res[i].remark;
                //拼接数据
                    datas += "<a href=\"web/chapterIndex/"+courseId+"\">"+
                        "<li class=\"img-li\"><img src="+imgUrl+" class=\"img1\">" +
                        "<p class=\"p1 p-a666\">"+name+"</p></li>" +
                        "</a>";
            }
            $(".img-ul").html(datas);
        });
    });
</script>
</body>

</html>